<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view style="height: 32rpx"></view>
				<view class="body_body">
					<image style="border: 1rpx solid #e4e8ef" mode="aspectFill" :src="userInfo.avatar"></image>
					<view class="body_two_head_wrap">
						<view style="font-size: 30rpx; font-weight: 580" class="body_two_head">
							{{ userInfo.nickName }}
						</view>
						<view class="body_two_head">主营业务:&nbsp;{{ userInfo.industry }}</view>
					</view>
					<view class="ibtn-wrap">
						<view v-if="!isMy" @click="guanzhuorquxiaoguanzhu" class="body_three">
							{{ userInfo.collectFlag == 1 ? '取消关注' : '关注' }}
						</view>
						<view class="title_t">
							<image src="../../static/imags/huiyuan2.png"></image>
							<view>{{ userInfo.vipTypeName }}</view>
						</view>
					</view>
				</view>
				<view class="show_text">简介： {{ !userInfo.briefInfo ? '暂无简介' : userInfo.briefInfo }}</view>
				<view class="body-menu">
					<view class="body-menu-item">
						<view>{{ userInfo.pubInfoCount }}</view>
						<view>内容</view>
					</view>
					<view class="body-menu-item">
						<view>{{ userInfo.likeCount }}</view>
						<view>点赞</view>
					</view>
					<view class="body-menu-item">
						<view>{{ userInfo.fansCount }}</view>
						<view>粉丝</view>
					</view>
					<view class="body-menu-item">
						<view>{{ userInfo.watchCount }}</view>
						<view>浏览量</view>
					</view>
				</view>
				<view class="fotter_input_head">
					<image class="fotter_input_head_f" src="../../static/imags/phone2.png"></image>
					<view @click="handlePhoneCall" class="fotter_input_head_t">联系电话</view>
					<image @click="showGuanJia" class="fotter_input_head_i" src="../../static/imags/Classroom.png">
					</image>
					<view @click="showGuanJia" class="fotter_input_head_p">联系专属服务管家</view>
				</view>
				<view class="fotter_input_body">
					<image class="fotter_input_body_f" src="../../static/imags/ditu.png"></image>
					<view class="fotter_input_body_o">位置</view>
					<view v-if="userInfo.province" class="fotter_input_body_tw">
						{{ showLocation(userInfo.province, userInfo.city) }}
					</view>
					<view v-if="false" class="fotter_input_body_t">距离您{{ userInfo.distance }}公里</view>
				</view>
			</view>
			<view class="my_container_button">
				<view @click="change('0')" class="button_item" :class="active === '0' ? 'button_active' : ''">全部</view>
				<view @click="change('1')" class="button_item" :class="active === '1' ? 'button_active' : ''">供应</view>
				<view @click="change('2')" class="button_item" :class="active === '2' ? 'button_active' : ''">采购</view>
			</view>
			<view class="show-items">
				<view class="show-items-item" v-for="(item, index) in itemList" :key="index" @click="goDetail(item.id)">
					<view class="show-items-item-left">
						<image class="show-items-item-image" mode="aspectFill" :src="item.picUrl"></image>
						<view class="show-items-item-image-bontton">
							<image src="../../static/images/time.png"></image>
							<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
						</view>
					</view>
					<view class="show-items-item-right">
						<view class="show-items-item-right-one">
							<view :class="[item.resourceType == '1' ? 'active' : '']">
								{{ item.resourceType == '1' ? '出售' : '采购' }}
							</view>
							<view style="font-weight: 600">{{ item.title }}</view>
						</view>
						<view class="show-items-item-right-two">
							{{ item.pubContent }}
						</view>
						<view class="show-items-item-right-four">
							<image src="../../static/images/location.png"></image>
							<view>{{ showLocation(item.province, item.city) }}</view>
							<view>￥{{ item.price ? item.price : '电议' }}</view>
						</view>
						<view class="show-items-item-right-five">
							<image :src="item.briefUserInfo.avatar"></image>
							<view>{{ item.briefUserInfo.nickName }}</view>
							<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
						</view>
						<view class="show-items-item-right-six">
							<view class="one b-btn">
								<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
								<view class="b-count">
									{{ item.viewCount == null ? 0 : item.viewCount }}
								</view>
							</view>
							<view @tap.stop="handleCollect(item, index)" class="two b-btn">
								<image v-if="item.collectFlag == '0'" class="b-img"
									src="../../static/images/collect.png"></image>
								<image v-else class="b-img" src="../../static/images/like1.png" />
								<view class="b-count">
									{{ item.collectCount == null ? 0 : item.collectCount }}
								</view>
							</view>
							<view class="three b-btn">
								<image class="b-img" src="../../static/images/message.png"></image>
								<view class="b-count">
									{{ item.commentCount == null ? 0 : item.commentCount }}
								</view>
							</view>
							<view class="four b-btn">
								<image class="b-img" src="../../static/images/zhaunfa.png"></image>
								<button class="share-btn" open-type="share" @tap.stop="handShareCountAdd(item, index)">
									分享 {{ item.shareCount == null ? 0 : item.shareCount }}
								</button>
							</view>
						</view>
					</view>
				</view>
				<view v-show="show" style="height: 70rpx; line-height: 70rpx; width: 100%">
					<u-loadmore icon :status="status" />
				</view>
			</view>
			<view style="height: 150rpx"></view>
		</view>
		<u-overlay :show="showguanjia" :duration="400" :z-index="999" :opacity="0.5" @click="canle">
			<view class="show_pic">
				<view class="show_head">
					<image class="show_head_o" src="../../uni_modules/zhouWei-APPshare/static/icon_weixin.png"></image>
					<view class="show_head_t">
						<view>废纸管家-安夏</view>
						<view>15396802565</view>
					</view>
				</view>
				<image class="show_p" show-menu-by-longpress="true"
					src="https://market-fenjie-1331975401.cos.ap-nanjing.myqcloud.com/2025/01/18/e0abffdb59e249ba9c5755fe99ea4b20.png">
				</image>
				<view class="show_footer">您在使用过程中有什么问题都可以联系您的专属服务管家</view>
			</view>
		</u-overlay>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import locationFormatter from '@/util/locationFormatter';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				userId: '',
				pageTitle: '会员主页',
				shareTitle: '找纸塑网一废纸废塑料AI获客平台',
				showSex: false,
				itemList: [],
				userInfo: {},
				isMy: false,
				showguanjia: false,
				active: '0',
				resourceType: '',
				pageSize: 5,
				pageNum: 1,
				total: 0,
				status: 'loading',
				show: true
			};
		},
		onReachBottom() {
			if (this.total == this.itemList.length) {
				this.status = 'nomore';
				this.show = true;
				return;
			}
			this.show = true;
			this.pageNum++;
			this.getDataList();
		},
		onLoad(e) {
			console.log(e, 666);
			if (e && e.id == uni.getStorageSync('userId')) {
				this.userId = uni.getStorageSync('userId');
				this.isMy = true;
			} else {
				this.userId = e.id;
				this.isMy = false;
			}
			this.getUserInfo();
			this.getDataList();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.shareTitle, //分享的名称
				path: '/page/market/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '找纸塑网一废纸废塑料AI获客平台',
				path: '/page/market/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		methods: {
			showLocation(pro, city) {
				const displayName = locationFormatter.format(pro, city);
				return displayName;
				console.log(displayName); // 输出：浙江杭州
			},
			//增加分享次数
			handShareCountAdd(item, index) {
				this.shareTile = item.title;
				this.$https.post(this.$api.getPubShareCountAdd, {
					id: item.id
				}).then((res) => {
					if (res.code === 200) {
						this.itemList[index].shareCount = this.itemList[index].shareCount + 1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 1,
					processType: item.collectFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						if (item.collectFlag == 0) {
							this.itemList[index].collectFlag = '1';
							this.itemList[index].collectCount++;
						} else {
							this.itemList[index].collectFlag = '0';
							this.itemList[index].collectCount--;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			handlePhoneCall() {
				this.$https.post(this.$api.getPubUser, {
					id: this.userInfo.userId
				}).then((res) => {
					if (res.code === 200) {
						// 与您界面中"政策专栏"联动的客服电话逻辑
						uni.makePhoneCall({
							phoneNumber: res.data.phonenumber, // 建议使用动态数据绑定政策咨询电话
							success: () => {},
							fail: (err) => {
								console.error('呼叫失败:', err);
								// 兼容微信小程序审核要求（需处理权限问题）
								if (err.errMsg.includes('permission')) {
									this.showAuthGuide(); // 显示类似您界面中的权限引导弹窗
								}
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/page/detail/index?id=' + id + '&type=' + this.type
				});
			},
			change(index) {
				this.active = index;
				if (this.active == '0') {
					this.resourceType = '';
				} else {
					this.resourceType = this.active;
				}
				this.pageNum = 1;
				this.getDataList();
			},
			getDataList() {
				const query = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					resourceType: this.resourceType,
					userId: this.userId,
					checkStatus: 2
				};
				this.$https.get(this.$api.pubInfoPage, query).then((res) => {
					if (res.code === 200) {
						if (this.pageNum == 1) {
							this.itemList = [];
						}
						const data = res.data;
						this.total = res.total;
						this.itemList = [...this.itemList, ...res.rows];
						if (this.total == 0) {
							this.status = 'nomore';
							this.show = true;
						} else {
							this.show = false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			},
			getUserInfo() {
				this.$https.post(this.$api.shangjiaxinxi, {
					userId: this.userId
				}).then((res) => {
					if (res.code === 200) {
						this.userInfo = res.data;
						// this.getDistance();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			},
			getMyLoction() {
				const _that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_that.userInfo.userLat = res.latitude;
						_that.userInfo.userLon = res.longitude;
						_that.getDistance();
					}
				});
			},
			//获取距离
			getDistance() {
				let param = {
					latFrom: uni.getStorageSync('address') ? JSON.parse(uni.getStorageSync('address')).lat : '32',
					lonFrom: uni.getStorageSync('address') ? JSON.parse(uni.getStorageSync('address')).lon : '122',
					latTo: this.userInfo.lat,
					lonTo: this.userInfo.lon
				};
				this.$https.post(this.$api.getDistance, param).then((res) => {
					if (res.code === 200) {
						console.log(res, 888);
						this.userInfo.distance = parseInt((res.data * 1) / 1000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			showGuanJia() {
				this.showguanjia = true;
			},
			canle() {
				this.showguanjia = false;
			},
			guanzhuorquxiaoguanzhu() {
				var title = '';
				var processType = '';
				if (this.userInfo.collectFlag == 1) {
					title = '取消关注成功';
					processType = '0';
				} else {
					title = '关注成功';
					processType = '1';
				}
				const data = {
					operateType: '4',
					pubInfoId: this.userInfo.userId,
					processType: processType
				};
				this.$https.post(this.$api.favoriteAndCollect, data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: title,
							icon: 'success'
						});
						this.userInfo.collectFlag = this.userInfo.collectFlag == 1 ? 0 : 1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.share-btn {
		font-size: 20rpx;
		width: 100rpx;
		line-height: 37rpx;
	}

	.my_container {
		width: 750rpx;
		min-height: 1624rpx;
		background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-style: normal;
		text-transform: none;

		.my_container_body {
			width: 750rpx;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.background-view-image {
				width: 686rpx;
				height: 220rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-left: 32rpx;
				margin-top: 12rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				margin-left: 32rpx;
				background: #ffffff !important;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 28rpx;
				padding-bottom: 20rpx;

				.body_body {
					width: 622rpx;
					display: flex;
					align-items: center;
					margin-left: 32rpx;

					.body_two_head_wrap {
						flex: 1;
						margin-left: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}

					.ibtn-wrap {
						margin-left: 10rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.title_t {
							margin-top: 10rpx;
							width: 166rpx;
							height: 38rpx;
							border-radius: 100rpx 100rpx 100rpx 100rpx;
							border: 2rpx solid #f1b640;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 30rpx;
								height: 30rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
							}

							view {
								height: 38rpx;
								font-weight: 400;
								font-size: 20rpx;
								color: #f1b640;
								line-height: 38rpx;
							}
						}

						.body_three {
							width: 136rpx;
							height: 58rpx;
							background: #f1b640;
							border-radius: 10rpx 10rpx 10rpx 10rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #ffffff;
							text-align: left;
							text-align: center;
							line-height: 58rpx;
						}
					}

					image {
						width: 72rpx;
						height: 72rpx;
						border-radius: 84rpx;
					}

					.body_two_head {
						margin-left: 20rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						// line-height: 72rpx;
						text-align: left;
						font-size: 22rpx;
						color: #333333;
					}
				}

				.show_text {
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					margin-left: 46rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 5;
				}

				.body-menu {
					margin-top: 20rpx;
					height: 86rpx;
					display: flex;
					justify-content: space-between;
					text-align: center;

					.body-menu-item {
						width: 25%;

						:nth-child(2n + 1) {
							height: 50rpx;
							font-weight: 600;
							font-size: 36rpx;
							color: #333333;
						}

						:nth-child(2n) {
							margin-top: 2rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #333;
						}
					}
				}

				.fotter_input_head {
					height: 44rpx;
					width: 622rpx;
					margin-left: 32rpx;
					display: flex;
					margin-top: 24rpx;

					.fotter_input_head_f {
						width: 28rpx;
						height: 28rpx;
						margin-top: 8rpx;
					}

					.fotter_input_head_t {
						width: 164rpx;
						height: 44rpx;
						line-height: 44rpx;
						background: #f1b640;
						border-radius: 100rpx 100rpx 100rpx 100rpx;
						margin-left: 8rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #ffffff;
						text-align: center;
					}

					.fotter_input_head_i {
						width: 34rpx;
						height: 34rpx;
						margin-top: 5rpx;
						margin-left: 164rpx;
					}

					.fotter_input_head_p {
						width: 224rpx;
						height: 36rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 26rpx;
						color: #19e820;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 4rpx;
					}
				}

				.fotter_input_body {
					height: 36rpx;
					line-height: 36rpx;
					width: 622rpx;
					margin-left: 32rpx;
					display: flex;
					margin-top: 22rpx;

					.fotter_input_body_f {
						width: 28rpx;
						height: 28rpx;
						margin-top: 4rpx;
					}

					.fotter_input_body_o {
						width: 60rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						text-align: left;
						margin-left: 10rpx;
					}

					.fotter_input_body_tw {
						margin-left: 10rpx;
						font-size: 28rpx;
						text-align: left;
					}

					.fotter_input_body_t {
						width: 260rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #777777;
						text-align: right;
					}
				}
			}

			.my_container_button {
				width: 750rpx;
				margin-top: 24rpx;
				display: flex;

				.button_item {
					background: white;
					width: 207rpx;
					margin-left: 32rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 84rpx 84rpx 84rpx 84rpx;
					font-weight: 500;
					font-size: 28rpx;
					text-align: center;
				}

				.button_active {
					background: #1ee825 !important;
					color: #ffffff !important;
				}
			}

			.show-items {
				margin-top: 22rpx;
				width: 100%;

				.show-items-title {
					display: flex;
					height: 50rpx;
					width: 686rpx;
					margin-left: 32rpx;

					.show-items-title-one {
						width: 584rpx;
						height: 50rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						line-height: 50rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.show-items-title-two {
						width: 70rpx;
						height: 40rpx;
						margin-top: 5rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #777777;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.show-items-title-three {
						width: 32rpx;
						height: 32rpx;
						margin-top: 9rpx;
					}
				}

				.show-items-item {
					width: 686rpx;
					height: 322rpx;
					background: #ffffff;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-left: 30rpx;
					margin-top: 20rpx;
					display: flex;

					.show-items-item-left {
						.show-items-item-image {
							width: 212rpx;
							height: 224rpx;
							margin-top: 28rpx;
							margin-left: 20rpx;
							border-radius: 24rpx;
						}

						.show-items-item-image-bontton {
							height: 70rpx;
							width: 212rpx;
							margin-left: 20rpx;
							display: flex;
							margin-top: 20rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}

							view {
								width: 128rpx;
								height: 36rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-left: 4rpx;
							}
						}
					}

					.show-items-item-right {
						margin-left: 20rpx;
						height: 322rpx;

						.show-items-item-right-one {
							display: flex;
							align-items: center;

							:nth-child(1) {
								width: 72rpx;
								height: 40rpx;
								line-height: 40rpx;
								background-color: #556983;
								border-radius: 10rpx;
								margin-top: 38rpx;
								margin-right: 10rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #fff;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}

							.active {
								width: 72rpx;
								height: 40rpx;
								line-height: 40rpx;
								background-color: #4fe200;
								border-radius: 10rpx;
								margin-top: 38rpx;
								margin-right: 10rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #fff;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}

							:nth-child(2) {
								margin-top: 38rpx;
								width: 340rpx;
								height: 40rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								line-height: 39rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								overflow: hidden;
								/* 确保超出部分的文本会被隐藏 */
								text-overflow: ellipsis;
								/* 超出部分显示省略号 */
								display: -webkit-box;
								/* 使用弹性盒子模型 */
								-webkit-line-clamp: 2;
								/* 限制显示两行 */
								-webkit-box-orient: vertical;
								/* 垂直排列子元素 */
							}
						}

						.show-items-item-right-two {
							width: 414rpx;
							height: 68rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #333;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 10rpx;
							overflow: hidden;
							/* 确保超出部分的文本会被隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							display: -webkit-box;
							/* 使用弹性盒子模型 */
							-webkit-line-clamp: 2;
							/* 限制显示两行 */
							-webkit-box-orient: vertical;
							/* 垂直排列子元素 */
						}

						.show-items-item-right-four {
							display: flex;
							width: 414rpx;
							height: 44rpx;

							image {
								width: 24rpx;
								height: 26rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								margin-top: 9rpx;
							}

							:nth-child(2) {
								flex: 1;
								height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #333;
								line-height: 44rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 4rpx;
							}

							:nth-child(3) {
								width: 180rpx;
								height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 24rpx;
								color: #ff4400;
								line-height: 44rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
							}
						}

						.show-items-item-right-five {
							display: flex;
							width: 414rpx;
							height: 44rpx;

							image {
								width: 40rpx;
								height: 40rpx;
								margin-top: 2rpx;
								border-radius: 24rpx 24rpx 24rpx 24rpx;
								border: 1rpx solid #e4e8ef;
							}

							:nth-child(2) {
								width: 220rpx;
								line-height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								line-height: 44rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 10rpx;
							}

							:nth-child(3) {
								width: 154rpx;
								line-height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 20rpx;
								color: #ff4400;
								line-height: 44rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
							}
						}

						.show-items-item-right-six {
							padding-left: 10rpx;
							height: 40rpx;
							width: 414rpx;
							display: flex;
							justify-content: space-between;
							margin-top: 30rpx;
							line-height: 40rpx;

							.b-btn {
								display: flex;

								.b-img {
									width: 40rpx;
									height: 40rpx;
								}

								.b-count {
									margin-left: 4rpx;
									font-size: 24rpx;
								}
							}

							.four {
								width: 130rpx;
								position: relative;

								.b-img {
									width: 36rpx;
									height: 36rpx;
								}

								.share-btn {
									background-color: transparent;
									padding-left: 36rpx;
									position: absolute;
									font-size: 22rpx;
									line-height: 37rpx;
									top: 0;
									width: 120rpx;
								}
							}
						}
					}
				}
			}

			.ft {
				margin-top: 20rpx;
				width: 750rpx;
				height: 130rpx;
				background: white;
				position: fixed;
				/* 固定位置 */
				bottom: 0;
				/* 距离屏幕底部 0 */
				left: 0;
				/* 从屏幕左侧开始 */
				z-index: 1000;
				/* 确保层级高于其他内容 */
				display: flex;

				.ft_1 {
					width: 52rpx;
					height: 52rpx;
					margin-left: 298rpx;
					margin-top: 39rpx;
				}

				.ft_2 {
					width: 104rpx;
					height: 36rpx;
					margin-top: 47rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				// .ft_item {
				// 	height: 52rpx;width: 111.6rpx;margin-left: 32rpx;
				// 	display: flex;
				// 	image{
				// 		width: 52rpx;
				// 		height: 52rpx;
				// 	}
				// 	view{
				// 		margin-left: 9.6rpx;
				// 		height: 52rpx;
				// 		width: 50rpx;
				// 		line-height: 52rpx;
				// 	}
				// }
			}
		}

		.show_pic {
			width: 570rpx;
			height: 790rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-left: 90rpx;
			margin-top: 417rpx;

			.show_head {
				height: 204rpx;
				display: flex;

				.show_head_o {
					height: 80rpx;
					width: 80rpx;
					margin-top: 86rpx;
					margin-left: 140rpx;
				}

				.show_head_t {
					margin-left: 20rpx;

					:nth-child(1) {
						height: 42rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						text-align: left;
						margin-top: 86rpx;
					}

					:nth-child(2) {
						width: 178rpx;
						height: 40rpx;
						line-height: 39rpx;
					}
				}
			}

			.show_p {
				width: 406rpx;
				height: 406rpx;
				margin-left: 84rpx;
				margin-top: 36rpx;
			}

			.show_footer {
				width: 448rpx;
				height: 80rpx;
				font-weight: 550;
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
				text-align: center;
				margin-left: 62rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>